import React from 'react';
import {ScrollView, StyleSheet, Text, View, FlatList} from 'react-native';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import Tabs1 from "./Tabs1";


export default class ScrollerTableView extends React.Component {

  static defaultProps = {
    data: [{name: '空调', id: '2729'},
      {name: '冰箱', id: '2723'},
      {name: '洗衣机', id: '2725'},

      {name: '生活小电', id: '4255'},
      {name: '生活家电', id: '2737'},
      {name: '热水器', id: '2741'},
      {name: '彩电', id: '2743'},
      {name: '百货超市', id: '3099'},

      {name: '冷柜', id: '2726'},
      {name: '厨房电器', id: '2742'},
      {name: '母婴用品', id: '3159'},
      {name: '家居厨具', id: '4253'},
    ]
  }

  render() {
    return (

      <ScrollableTabView
        ref={(scrollableTabView) => { this.scrollableTabView = scrollableTabView; }}
        renderTabBar={() => <Tabs1/>}
        initialPage={0}
        style={styles.scrollStyle}
        tabBarUnderlineStyle={{backgroundColor: '#3398f7', height: 2, marginBottom: -1}}
        tabBarBackgroundColor='#FFFFFF'
        tabBarActiveTextColor='#333333'
        tabBarInactiveTextColor='#b3b3b3'
      >
        {
          this.props.data.map((item, index) => {
            return (
              <FlatList
                key={item.id}
                tabLabel={item.name}
                style={styles.segmentOneStyle}
                data={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]}
                renderItem={(item) => this.renderItem(item,index)}
                keyExtractor={(item) => {
                  return item
                }}
                initialNumToRender={10}
                onEndReachedThreshold={-0.1}
                onEndReached={()=>{
                  if(index+1!==this.props.data.length){
                    requestAnimationFrame(() => {
                      this.scrollableTabView.goToPage(index+1);
                    });
                  }
                }}
              />
            )
          })
        }
      </ScrollableTabView>
    );
  }

  renderItem = ({item,index}) => {
    console.log({item,index})
    return (
      <View style={{width: 100, height: 80}}>
        <Text style={{color: 'red'}}>
          {`第${item}页${index}`}
        </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  segmentOneStyle: {
    flex: 1,
  },
  scrollStyle: {
    flex: 1,
    backgroundColor: '#fff',
  },
})
